<template>
	<view class="page-container">
		<u-popup v-model="showVoucher" mode="top">
			<view class="voucher-code">
				<view class="voucher-info">
					<!-- <view style="width: 120rpx;;">
						<img src="@/static/images/icon-di.png" style="width: 100rpx;">
					</view> -->
					<view style="flex: 1;">
						<view class="title" style="font-size: 34rpx; color: red;">{{viewVoucher.voucher_name||viewVoucher.voucher_type}}</view>
						<view class="subtitle" v-if="viewVoucher.car_applicable">{{viewVoucher.car_applicable}}</view>
					</view>
					<view style="color: red; width: 120rpx; text-align: right; display: flex; align-items: center;justify-content: end;">
						¥<span style="font-size: 38rpx;">{{viewVoucher.face_value}}</span>
					</view>
				</view>
				<view class="voucher-validity">
					<span>有效期: {{$u.timeFormat(viewVoucher.active_time, 'yyyy-mm-dd')}} ~ {{$u.timeFormat(viewVoucher.expire_time, 'yyyy-mm-dd')}}</span>
				</view>
				<view>
					<img :src="voucherQrCode(viewVoucher.voucher_code)" style="width: 80px;">
				</view>
				<view class="voucher-validity">
					<span style="font-weight: bold;">券码: <span style="margin-left: 1em; letter-spacing: 0.2em;">{{viewVoucher.voucher_code}}</span></span>
				</view>
				
				<view class="voucher-validity">
					<p>核销时，请向工作人员出示该券码</p>
				</view>
				<view class="voucher-validity" v-if="viewVoucher.validity_tips">
					<p>{{viewVoucher.validity_tips}}</p>
				</view>
				<view class="voucher-validity" v-if="viewVoucher.reservation">
					<p>{{viewVoucher.reservation}}</p>
				</view>
				<view class="voucher-validity" v-if="viewVoucher.remind">
					<p>{{viewVoucher.remind}}</p>
				</view>
			</view>
		</u-popup>
		<ul>
			<li v-for="voucher in records" style="border-left: 10rpx solid #eee;">
				<view class="voucher-info">
					<!-- <view style="width: 120rpx;;">
						<img src="@/static/images/icon-voucher-char.png" style="width: 100rpx;">
					</view> -->
					<view style="flex: 1;">
						<view class="title" style="font-size: 34rpx; color: red;">{{voucher.voucher_name||voucher.voucher_type}}</view>
						<view class="subtitle" v-if="voucher.car_applicable">{{voucher.car_applicable}}</view>
					</view>
					<view style="color: red; width: 120rpx; text-align: right; display: flex; align-items: center;justify-content: end;">
						¥<span style="font-size: 38rpx;padding-left:.5em;">{{parseFloat(voucher.face_value)}}</span>
					</view>
				</view>
				<view class="voucher-validity">
					<span>有效期: {{$u.timeFormat(voucher.active_time, 'yyyy-mm-dd')}} ~ {{$u.timeFormat(voucher.expire_time, 'yyyy-mm-dd')}}</span>
					<span @click="voucherDetail(voucher)" class="btn-use">立即使用</span>
				</view>
			</li>
		</ul>
		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" :link="currentPage" ref="wxs"></wx-share>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPage: location.href,
				shop:{},
				form:{
					name:'',
					phone_number:'',
					address:''
				},
				records:[],
				showVoucher: false,
				viewVoucher:{}
			}
		},
		onLoad() {
			this.getShop()
			this.fetchRecords()
		},
		methods: {
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			fetchRecords(){
				this.$u.post('/voucher/get-voucher-list', {}).then(res => {
					this.records = res
				}).catch(e => {
				})
			},
			voucherQrCode(code){
				return this.$baseUrl+'/qr-code/image/'+code
			},
			voucherDetail(voucher){
				// console.log(voucher)
				this.viewVoucher = voucher
				this.showVoucher = true
			},
			close(){
				this.showVoucher = false
			},
			open(){
				console.log('open')
			}
		}
	}
</script>

<style scoped>
.page-container{
	padding: 30rpx;
}
ul{
	text-decoration: none;
	padding: 0;
}
ul li{
	list-style: none;
	margin-bottom: 30rpx;
	display: flex;
	flex-direction: column;
	line-height: 1.5;
	border-radius: 10rpx;
	overflow: hidden;
}
.voucher-info{
	display:flex;
	flex-direct: row;
	background-color: #fff;
	padding: 20rpx;
	border-bottom: 1px dashed #eee;
}
.voucher-validity{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 20rpx;
	background-color: #fff;
}
.voucher-code{
	padding: 50rpx;
	box-sizing: border-box;
}
.btn-use{
	line-height: 1.8;
	padding: 0 16rpx;
	background-color: red;
	color: #fff;
	border-radius: 8rpx;
	overflow: hidden;
}
</style>
